<template>
  <div>
    <!--    员工详情，id={{ $route.params.id }}，username={{ $route.query.username }}-->
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="登录账号设置">
            <el-form :model="form" :rules="rules" label-width="100px" style="width:400px;">
              <el-form-item prop="username" label="姓名">
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input v-model="form.password"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情">
            <user-info></user-info>
          </el-tab-pane>
          <el-tab-pane label="岗位信息">
            <job-info></job-info>
          </el-tab-pane>

        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { saveUserDetailById } from '@/api/employees.js'
import { getEmployeeBaseInfo } from '@/api/user.js'
import jobInfo from './components/job-info.vue'
import userInfo from './components/user-info.vue'

export default {
  name: 'EmployeeDetailPage',
  components: {
    jobInfo,
    userInfo
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名必填', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码必填', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 回显数据
    // this.form = await getEmployeeBaseInfo(this.$route.params.id)
    // this.form.password = ''  // ==> 有问题的语句

    // 解决问题的方式，处理完数后，然后赋值
    const form = await getEmployeeBaseInfo(this.$route.params.id)
    form.password = ''
    this.form = form
    setTimeout(() => {
      // 服务器返回的数据没有password
      // this.form = { username: 'zs' }
      // this.form.password = ''
      // 解决办法1
      // this.$set(this.form, 'password', '')
      // 解决办法2
      // const form = { username: 'zs' }
      // form.password = ''
      // this.form = form
    }, 1000)
  },
  methods: {
    async submit() {
      await saveUserDetailById(this.form)
      this.$message.success('提交成功')
    }
  }
}
</script>

<style scoped>

</style>
